<template>
	<div>
		<Header>
			<h1>历史文章</h1>
			<p>画船听雨：你看得到我打在屏幕上的字，看不到我落在键盘上的泪。 Kali Linux：The quieter you become, the more you are able to hear.</p>
			<button id="getData" v-on:click="getArticleHistory" style="width:200px;height:60px;">获取内容</button>
		</Header>
		<Content>
			<div class="card_content">
				<div v-for="val in articleHistory" v-bind:key="val.aid">
					<h4 v-if="val.year">{{val.year}} 年</h4>
					<div>
						<h5><time datetime="2016-02-14">{{val.releasetime}}</time></h5>
						<router-link v-bind:to="val.ahref" style="color: cyan;">📖 {{val.title}}</router-link>
					</div>
				</div>
			</div>
		</Content>
	</div>
</template>

<script>
import Header from '../components/Header.vue'
import Content from '../components/Content.vue'

export default {
	name: 'Article',
	components: {
		Header,
		Content,
	},
	data: function() {
		return {
			articleHistory: []
		}
	},
	methods: {
		getArticleHistory: function() {
			fetch(this.url+"/article/articlehistory",{
				method: "POST",
				headers: {"Content-Type": "application/x-www-form-urlencoded"}
			})
			.then((res) => {return res.text()})
			.then((res) => {
				res = JSON.parse(res)["data"]
				var record = []
				for (let i in res) {
					res[i].releasetime = res[i]["releasetime"].trim().split(" ")[0]
					res[i].ahref = "/detail/"+res[i]["releasetime"].trim().split(" ")[0].replaceAll("-","/")+"/"+res[i]["aid"]
					var temp = res[i]["releasetime"].trim().split("-")[0]
					if(!(record.includes(temp))) {
						record.push(temp)
						res[i]["year"] = temp
					}
				}
				this.articleHistory = res
			})
		}
	},
	mounted() {
		var getButton = document.getElementById("getData")
		getButton.addEventListener("click",()=>{this.toast("好的~",2000)})
	}
}
</script>

<style scoped>
	.card_content {
		width: 90%;
		margin: 0 auto;
		padding: 24px;
		border: 1px solid #AAAAAA;
		border-radius: 5px 5px 5px 5px;
	}
</style>